/*
 * @Description: 车辆预约表单组件
 * @Author: shuaishuai.wang
 * @Date: 2019-07-10 15:00:53
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-10-12 16:59:00
 */
<template>
  <div class="appointment_form">
    <div class="main_area fontsize32">
      <div class="form_area">
        <h2>预约信息</h2>
        <div
          class="form_input"
          v-if="formOption.type=='private'"
        >
          <p>检测类型*</p>
          <input
            v-model="appointmentData.sort"
            readonly
          />
        </div>
        <div
          class="form_input_choose"
          v-else
        >
          <p>检测类型*</p>
          <div class="type_area flex-h flex-hsb">
            <div
              class="type"
              @click="appointmentData.type = 0"
            >
              <i
                class="iconfont"
                :class="appointmentData.type == 0 ? 'icon-circle-o': 'icon-circle'"
              ></i>
              <span>综合检测</span>
            </div>
            <div
              class="type"
              @click="appointmentData.type = 1"
            >
              <i
                class="iconfont"
                :class="appointmentData.type == 1 ? 'icon-circle-o': 'icon-circle'"
              ></i>
              <span>车辆年检</span>
            </div>
            <div
              class="type"
              @click="appointmentData.type = 2"
            >
              <i
                class="iconfont"
                :class="appointmentData.type == 2 ? 'icon-circle-o': 'icon-circle'"
              ></i>
              <span>三检合一</span>
            </div>
          </div>
        </div>
        <div class="form_input">
          <p>姓名*</p>
          <input
            v-model="appointmentData.name"
            @input="nameMaxLength"
            placeholder="请输入您的姓名"
          />
        </div>
        <div class="form_input">
          <p>手机号*</p>
          <input
            v-model="appointmentData.phone"
            @input="phoneMaxLength"
            placeholder="请输入您的手机号"
          />
        </div>
        <div class="form_input">
          <p>车牌号*</p>
          <input
            v-model="appointmentData.plate_number"
            @click="openInputPlateNo"
            readonly
            placeholder="请输入预约车辆车牌号"
          />
        </div>
        <div class="form_input">
          <p>车辆单位</p>
          <textarea
            v-model="appointmentData.department"
            placeholder="请输入您的车辆单位"
            @input="departmentMaxLength"
          ></textarea>
        </div>
        <div
          class="form_input upload_img"
          v-if="formOption.type=='private'"
        >
          <p>芝麻信用截图上传</p>
          <i
            @click="openScreen('upload')"
            class="icon iconfont icon-add"
            v-if="appointmentData.img_url.length < 1"
          ></i>
          <div
            v-else
            class="load_img"
          >
            <i
              class="iconfont icon-cancel-o"
              @click="appointmentData.img_url=''"
            ></i>
            <div class="img_area">
              <img :src="appointmentData.img_url">
            </div>
          </div>
        </div>
        <div
          class="remark fontsize28"
          v-if="formOption.type=='private'"
        >
          <p>
            <span>注：</span>本公司针对信用达标（芝麻信用分达到650分)的私家车车主推出年检优惠及验车绿色通道的活动<span @click="openScreen('require')">查看具体要求>></span>
          </p>
        </div>
      </div>
      <div class="form_area">
        <h3>预约时间<span>（一旦确定无法修改）</span></h3>
        <div class="form_input flex-h">
          <p>时间*</p>
          <!--<input
            v-model=""
            placeholder="请选择预约时间"
            readonly
          />-->
          <p
            class="time_input"
            @click="chooseTime"
            :class="{'time_input_place': appointmentData.time.length < 1}"
          >
            <span class="time_input">{{appointmentData.time.length > 0 ? this.dateFormate(appointmentData.time) : '请选择预约时间'}}</span>
            <span
              v-show="appointmentData.duration.length > 0"
              class="time_input"
            >{{appointmentData.duration}}</span>
          </p>
        </div>
      </div>
      <div
        class="check_area"
        v-show="appointmentData.type == 1"
      >
        <p class="fontsize28"><span
            @click="checkTime = !checkTime"
            :class="checkTime ? 'checked' : ''"
            class="icon iconfont icon-choose"
          ></span>我已确认车辆无未处理违章且已达到年检时间</p>
      </div>
      <div class="msg">
        <p>若晚于预约时间到达则需重新排队</p>
        <!-- ，如需预约多辆请电话预约<a href="tel:021-39978738">021-39978738</a> -->
      </div>
      <div class="confirm_btn">
        <button
          v-if="formOption.edit"
          @click="saveAppointmentData"
          class="fontsize32"
        >保存</button>
        <button
          v-else
          @click="sendAppointmentData"
          class="fontsize32"
        >提交预约</button>
      </div>
    </div>
    <loading :isloading="loading.state">
      <div class="loading_area">
        <p class="loading_text">{{loading.text}}</p>
      </div>
    </loading>
    <input-plate-no
      :inputState="plateNoState"
      @closePlateInput="closePlateInput"
      @getPlateInfo="getPlateInfo"
    ></input-plate-no>
    <choose-handler
      :handlerState="handlerState"
      @chooseHandler="chooseHandler"
      @closeHandler="closeHandler"
      ref="chooseHandler"
    ></choose-handler>
    <popup
      :showState='popupState'
      :info="popupInfo"
      @confirmFun="popupState = false"
    ></popup>
    <full-screen-cover
      v-show="normalScreen"
      @clickBackground="normalScreen=false"
    >
      <div
        class="activities_require fontsize28"
        v-show="normalScreenType=='require'"
      >
        <div class="title">
          <img :src="titleImg">
        </div>
        <div class="info">
          <p>1.请上传支付宝芝麻信用分截图。</p>
          <p>2.检测登记时工作人员将对现场出示的支付宝芝麻信用分界面和预约上传的进行一致性审核。</p>
          <p>①若与预约时上传一致并且芝麻信用分达到650分，则视为信用达标，可享受验车绿色通道及年检九折优惠。</p>
          <p>②若与预约时上传不一致，则视为信用不达标，验车绿色通道和年检优惠都不可享。</p>
          <p><span>注：</span>此次活动仅限私家车车主参加，不可与其他活动同时享受。活动期间最终解释权归本公司所有，若有不当之处，敬请谅解</p>
        </div>
        <div class="btn">
          <button @click="normalScreen = false">我知道了</button>
        </div>
      </div>
      <div
        class="img_upload"
        v-show="normalScreenType=='upload'"
      >
        <div class="title fontsize40">图片上传说明</div>
        <div
          class="close_btn"
          @click="normalScreen = false"
        >
          <i class="iconfont icon-cancel"></i>
        </div>
        <div class="example_img">
          <img :src="exampleImg">
        </div>
        <p class="fontsize28">请打开支付宝app，在“我的 - 芝麻信用”中找到芝麻信用分数页面，截图并上传。</p>
        <div class="btn">
          <button @click="uploadImg">上传图片</button>
        </div>
      </div>
    </full-screen-cover>
  </div>
</template>

<script>
import { getUrlParams, ajaxAsync, AppRouterUtils } from 'vue-xiaobu-utils'
import { Loading, TitleBar, FullScreenCover } from 'vue-xb-ui-depot'
import AjaxForBusOpen from '@/utils/AjaxForBusOpen'
import InputPlateNo from './../components/InputPlateNo'
import ChooseHandler from './../components/ChooseHandler'
import Popup from './../components/Popup'
// import getOssDec from './../api'
export default {
  components: {
    Loading,
    'input-plate-no': InputPlateNo,
    'choose-handler': ChooseHandler,
    'popup': Popup,
    TitleBar,
    FullScreenCover
  },
  props: {
    formOption: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      bucker: 0,
      appointmentData: { // 预约表单数据，具体内容按表单顺序排列
        operateState: 1, // 运营1非运营0
        sort: '', // 车检类型文本
        type: -1, // 车检类型code
        name: '', // 姓名
        phone: '', // 手机号码
        plate_number: '', // 车牌号
        plate_color: '', // 车牌颜色
        department: '', // 所属单位
        img_url: '', // 芝麻信用分图片
        time: '', // 预约时间
        duration: '' // 存储预约时间数据
      },
      formCheck: { // 表单检查数据
        result: false, // 结果
        reason: '' // 原因
      },
      checkTime: false, // 勾选检测时间到
      Toast: {}, // 接收Toast
      System: {}, // 接收System
      loading: { // 加载中或请求中状态配置
        state: false,
        text: ''
      },
      days: [], // 可选日期数据存储位置，用于多次请求数据时减少用户等待时间
      popupInfo: { // 提示确认弹窗信息
        title: '提示',
        msg: '您已取消本次预约',
        btnLeft: '',
        btnRight: '我知道了'
      },
      popupState: false, // 错误提示弹窗状态
      plateNoState: false, // 是否打开选择车牌号弹窗
      handlerState: false, // 是否打开预约时间段弹窗
      jumpUrl: window.prodInApp ? 'city-app/' : '',
      oldId: '',
      titleImg: require('@static/image/appointmentForm/title.png'),
      exampleImg: require('@static/image/appointmentForm/example.png'),
      normalScreen: false,
      normalScreenType: 'require',
      ossConfig: {
        bucket: '',
        endpoint: '',
        ossPath: ''
      }
    }
  },
  mounted() {
    this.$Toast.then(Toast => {
      this.Toast = Toast
    })
    this.$System.then(System => {
      this.System = System
    })
    let self = this
    // 获取上传配置
    ajaxAsync('/oss/policy/image', {}).then(res => {
      self.ossConfig.bucket = res.BUCKET
      self.ossConfig.endpoint = res.END_POINT
      self.ossConfig.ossPath = res.DIR
    })
    let afresh = getUrlParams().state
    if (afresh || this.formOption.edit) {
      let oldVal = JSON.parse(window.localStorage.getItem('appointment')) //  || JSON.parse(this.System.setCache(() => { }, () => { }, 'appointment'))
      this.oldId = oldVal.ID
      console.error(oldVal)
      this.appointmentData = {
        operateState: oldVal.IS_OPERATING, // 运营1非运营0
        sort: oldVal.CAR_CHECK_TYPE_DESC, // 车检类型文本
        type: oldVal.CAR_CHECK_TYPE, // 车检类型code
        name: oldVal.REAL_NAME, // 姓名
        phone: oldVal.PHONE, // 手机号码
        plate_number: oldVal.CAR_LICENSE_NO, // 车牌号
        plate_color: oldVal.CAR_LICENSE_COLOR, // 车牌颜色
        department: oldVal.CAR_OWN_COMPANY, // 所属单位
        img_url: oldVal.ZHIMA_CREDIT_URL || '', // 芝麻信用分图片
        time: this.formOption.edit ? oldVal.RESERVATION_DATE : '', // 预约时间
        duration: this.formOption.edit ? oldVal.RESERVATION_TIME_PERIOD : '' // 存储预约时间数据
      }
    } else {
      if (this.formOption.type === 'private') {
        this.appointmentData.sort = '车辆年检'
        this.appointmentData.type = 1
        this.appointmentData.operateState = 0
      }
    }
  },
  methods: {
    checkFormData() { // 表单填写规范检查，除去表单中选择的部分，只验证手动填写的部分（姓名、手机号码、车牌号码）
      // let phoneReg = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ // 较为准确的手机号码匹配正则表达式
      let phoneReg = /^1\d{10}$/ // 简单手机号码正则表达式
      let nameReg = /^[\u4e00-\u9fa5]{2,10}$/ // 姓名校验，仅限长度2-10的汉字
      // let carNumberReg = /^[\u4E00-\u9FA5][A-Z][0-9,A-Z]{5}$/ // 车牌验证
      if (this.appointmentData.type < 0) {
        this.formCheck = {
          result: false,
          reason: '请选择车辆检测类型'
        }
        return
      } else if (this.appointmentData.name.length < 1) {
        this.formCheck = {
          result: false,
          reason: '请输入您的姓名'
        }
        return
      } else if (!nameReg.test(this.appointmentData.name)) {
        this.formCheck = {
          result: false,
          reason: '请输入正确的姓名'
        }
        return
      } else if (this.appointmentData.phone.length < 1) {
        this.formCheck = {
          result: false,
          reason: '请输入您的手机号'
        }
        return
      } else if (!phoneReg.test(this.appointmentData.phone)) {
        this.formCheck = {
          result: false,
          reason: '请输入正确的手机号'
        }
        return
      } else if (this.appointmentData.plate_number.length < 1) {
        this.formCheck = {
          result: false,
          reason: '请输入您的车牌号'
        }
        return
      } else if (this.appointmentData.time.length < 1) {
        this.formCheck = {
          result: false,
          reason: '请选择预约时间'
        }
        return
      } else if (this.appointmentData.type === 1 && !this.checkTime) {
        this.formCheck = {
          result: false,
          reason: '请确认车辆无未处理违章且已达到年检时间'
        }
        return
      }
      this.formCheck.result = true
    },
    sendAppointmentData() { // 新建预约操作，先进行表单验证，验证通过向后台发送请求，不通过则提醒用户填写错误的信息
      this.checkFormData()
      if (this.formCheck.result) {
        let params = {
          'IS_OPERATING': this.appointmentData.operateState,
          'CAR_CHECK_TYPE': this.appointmentData.type,
          'REAL_NAME': this.appointmentData.name,
          'PHONE': this.appointmentData.phone,
          'CAR_LICENSE_NO': this.appointmentData.plate_number,
          'CAR_LICENSE_COLOR': this.appointmentData.plate_color,
          'CAR_OWN_COMPANY': this.appointmentData.department,
          'ZHIMA_CREDIT_URL': this.appointmentData.img_url,
          'RESERVATION_DATE': this.appointmentData.time,
          'RESERVATION_TIME_PERIOD': this.appointmentData.duration
        }
        AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/add', params, 2).then(data => {
          AppRouterUtils.open('vehicleResult.html?_tv=false&_rv=false&time=' + this.dateFormate(this.appointmentData.time) + ' ' + this.appointmentData.duration)
        }).catch(err => {
          this.popupState = true
          this.popupInfo = { // 提示确认弹窗信息
            title: '提示',
            msg: err.error.data.RSPMSG,
            btnLeft: '',
            btnRight: '我知道了'
          }
        })
      } else {
        console.log(this.formCheck.reason)
        this.Toast.showShortBottom(this.formCheck.reason)
      }
    },
    saveAppointmentData() { // 编辑保存操作，先进行表单验证，验证通过向后台发送请求，不通过则提醒用户填写错误的信息
      this.checkFormData()
      if (this.formCheck.result) {
        let params = {
          'ID': this.oldId,
          'IS_OPERATING': this.appointmentData.operateState,
          'CAR_CHECK_TYPE': this.appointmentData.type,
          'REAL_NAME': this.appointmentData.name,
          'PHONE': this.appointmentData.phone,
          'CAR_LICENSE_NO': this.appointmentData.plate_number,
          'CAR_LICENSE_COLOR': this.appointmentData.plate_color,
          'CAR_OWN_COMPANY': this.appointmentData.department,
          'ZHIMA_CREDIT_URL': this.appointmentData.img_url,
          'RESERVATION_DATE': this.appointmentData.time,
          'RESERVATION_TIME_PERIOD': this.appointmentData.duration
        }
        AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/edit', params, 2).then(data => {
          this.Toast.showShortBottom('保存成功')
          AppRouterUtils.open('vehicleDetail.html?_tv=false&_rv=false&id=' + this.oldId)
        }).catch(err => {
          this.popupState = true
          this.popupInfo = { // 提示确认弹窗信息
            title: '提示',
            msg: err.error.data.RSPMSG,
            btnLeft: '',
            btnRight: '我知道了'
          }
        })
      } else {
        console.log(this.formCheck.reason)
        this.Toast.showShortBottom(this.formCheck.reason)
      }
    },
    chooseTime() { // 选择预约日期与预约时间段
      if (!this.formOption.edit) {
        this.openHandler()
        // let time = new Date()
        // this.$refs.chooseHandler.getHandler({ 'CURRENT_YEAR_MONTH': time.getFullYear() + '-' + (time.getMonth() + 1).toString().padStart('0', 2) })
      }
      /* if (this.days.length < 1) {
        this.loading.state = true
        this.loading.text = '正在查询最近可选日期...'
      }
      get('date_query').then(res => {
        this.loading.state = false
        if (this.days.length > 0 && this.days.toString() === res.date.days.toString()) {

        } else {
          this.openHandler()
        }
      }) */
    },
    uploadImg() { // 上传图片
      this.System.photoPicker(1, 0, 0, url => {
        this.normalScreen = false
        this.appointmentData.img_url = JSON.parse(url)[0]
        let imgUrl = this.appointmentData.img_url
        let filename = imgUrl.slice(imgUrl.lastIndexOf('/'))
        let suffixName = filename.slice(filename.lastIndexOf('.'))
        filename = filename.slice(0, filename.lastIndexOf('.'))
        filename += `_${new Date().getTime() + suffixName}`
        filename = `${this.ossConfig.ossPath + filename}`
        let req = {
          bucket: this.ossConfig.bucket,
          endpoint: this.ossConfig.endpoint,
          ossPath: this.ossConfig.ossPath,
          files: [{
            filePath: imgUrl,
            ossPath: filename
          }]
        }
        this.System.uploadFiles(
          req,
          arr => {
            this.Toast.showShortBottom('图片已上传')
            this.appointmentData.img_url = arr[0]
          },
          errorMsg => {
            this.Toast.showShortBottom('图片上传失败')
          }
        )
      })
    },
    openInputPlateNo() { // 打开车牌输入弹窗
      this.plateNoState = true
    },
    closePlateInput() { // 关闭车牌输入弹窗
      this.plateNoState = false
    },
    getPlateInfo(plate) { // 获取当前输入的车牌号
      this.appointmentData.plate_number = plate.plateNumber
      this.appointmentData.plate_color = plate.plateColor
      this.closePlateInput()
    },
    openHandler() { // 打开预约时间段弹窗
      this.handlerState = true
    },
    closeHandler() { // 关闭预约时间段弹窗
      this.handlerState = false
    },
    chooseHandler(data) { // 选择预约时间段并关闭弹窗
      this.appointmentData.duration = data.duration
      this.appointmentData.time = data.time
      this.handlerState = false
    },
    openScreen(type) { // 打开图片上传或活动要求弹窗
      this.normalScreen = true
      this.normalScreenType = type
    },
    dateFormate(date) {
      if (date.length > 0) {
        let dateArr = date.split('-')
        return dateArr[0] + '年' + dateArr[1] + '月' + dateArr[2] + '日'
      }
      return ''
    },
    nameMaxLength() { // 姓名长度验证
      if (this.appointmentData.name && this.appointmentData.name.length > 10) {
        this.appointmentData.name = this.appointmentData.name.substring(0, 10)
      }
    },
    phoneMaxLength() { // 手机号长度验证
      this.appointmentData.phone = this.appointmentData.phone.replace(/[^\d]/g, '').substring(0, 11)
    },
    departmentMaxLength() { // 所属单位长度验证
      this.appointmentData.department = this.appointmentData.department.substring(0, 20)
    }
  }
}
</script>
<style lang="scss" scope>
@import './../common.scss';
.appointment_form {
  overflow: hidden;
  .main_area {
    padding: 32px;
    overflow: auto;
    position: relative;
    height: 100%;
  }
  /*表单区域样式*/
  .form_area {
    margin-bottom: 32px;
    // box-shadow: $boxShadow; /*no*/
    border-radius: 4px; /*no*/
    background-color: $bgColorDiv;
    padding: 32px 32px 0 32px;
    h2 {
      height: 48px;
      line-height: 48px;
      font-weight: 500;
      margin-bottom: 32px;
      padding-left: 20px;
      border-left: 8px solid $themeColors;
      span {
        margin-left: 20px;
        color: $fontColorMini;
      }
    }
    .form_input {
      padding: 34px 0;
      display: flex;
      color: $fontColorMajor;
      border-top: 1px solid #eee;
      p {
        width: 150px;
        margin-right: 48px;
      }
      input {
        width: 418px;
        height: 44px;
        line-height: 44px;
        border: 0;
        &::placeholder {
          color: #cccccc;
        }
      }
      textarea {
        width: 418px;
        height: 88px;
        overflow: hidden;
        border: 0;
        resize: none;
        &::placeholder {
          color: #cccccc;
        }
      }
      .time_input {
        width: 418px;
        padding: 6px 0;
        margin-right: 0;
        span {
          height: 32px;
          line-height: 32px;
          display: block;
        }
      }
      .time_input_place {
        color: #cccccc;
      }
      .time_bucker {
        width: 456px;
        display: flex;
        justify-content: space-between;
        transition: all 0.5s;
        p {
          width: fit-content;
        }
        .icon {
          margin: 0;
          font-size: 48px; /*no*/
        }
      }
    }
    .upload_img {
      .icon {
        width: 80px;
        height: 80px;
        display: block;
        text-align: center;
        line-height: 80px;
        border: 1px solid #999; /*no*/
        color: #999;
      }
      .load_img {
        width: 80px;
        height: 80px;
        border: 1px solid #999; /*no*/
        position: relative;
        i {
          position: absolute;
          top: -15px;
          right: -15px;
          color: #999;
        }
        .img_area {
          width: 80px;
          height: 80px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
    }
    .form_input_choose {
      padding: 34px 0;
      border-top: 1px solid #eee;
      p {
        margin-bottom: 24px;
      }
      .type_area {
        .type {
          .iconfont {
            color: $formColor;
          }
        }
      }
    }
    /*年检备注信息*/
    .remark {
      padding-bottom: 32px;
      color: $fontColorMini;
      span {
        color: $formColor;
      }
    }
    h3 {
      margin-bottom: 34px;
      border-left: 8px solid $themeColors;
      padding-left: 20px;
      span {
        font-size: 12px; /*no*/
        color: $fontColorSecond;
      }
    }
    .choose_bucker {
      padding: 12px 32px;
      .time_bucker {
        width: 196px;
        height: 60px;
        border-radius: 4px; /*no*/
        border: 1px solid $formColor; /*no*/
        text-align: center;
        color: $formColor;
        font-size: 16px; /*no*/
        line-height: 60px;
        margin-bottom: 20px;
      }
      .choose_one {
        background-color: $formColor;
        color: $fontColorWhite;
      }
    }
    .empty_bucker {
      width: 196px;
      height: 60px;
      border: 1px solid transparent; /*no*/
    }
  }
  /*勾选确认车辆已到达到综检时间*/
  .check_area {
    margin-bottom: 18px;
    p {
      height: 36px;
      line-height: 36px;
      span {
        width: 24px;
        height: 24px;
        background-color: #fff;
        color: $fontColorWhite;
        border-radius: 2px; /*no*/
        margin-right: 16px;
        transition: all 0.5s;
        border: 1px solid $fontColorMini; /*no*/
      }
      .checked {
        background-color: $formColor;
        border: 1px solid $themeColors; /*no*/
      }
    }
  }
  /*提示信息*/
  .msg {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 72px;
    font-size: 14px; /*no*/
    p {
      height: 44px;
      color: $fontColorMini;
      line-height: 44px;
      a {
        color: $formColor;
      }
    }
  }
  /*底部确认按钮*/
  .confirm_btn {
    width: 686px;
    margin-left: auto;
    margin-bottom: 90px;
    button {
      width: 100%;
      height: 72px;
      border: 0;
      border-radius: 25px; /*no*/
      background-color: $themeColors;
      color: $fontColorWhite;
    }
  }
  .loading_area {
    background-color: rgba(0, 0, 0, 0.5);
    color: $fontColorWhite;
    padding: 16px 32px;
    text-align: center;
    border-radius: 8px; /*no*/
  }
}
.activities_require {
  width: 622px;
  height: fit-content;
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 8px; /*no*/
  z-index: 2;
  .title {
    img {
      width: 100%;
    }
  }
  .info {
    padding: 32px;
    p {
      padding-bottom: 10px;
      span {
        color: $themeColors;
        padding-top: 20px;
      }
    }
  }
  .btn {
    text-align: center;
    padding-bottom: 32px;
    button {
      width: 488px;
      height: 72px;
      margin: auto;
      border: 0;
      border-radius: 25px; /*no*/
      color: #fff;
      background-color: $themeColors;
      box-shadow: 0px 6px 14px 0px rgba(159, 204, 254, 1); /*no*/
    }
  }
}
.img_upload {
  width: 622px;
  height: fit-content;
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 8px; /*no*/
  padding: 32px;
  z-index: 2;
  .title {
    text-align: center;
  }
  .close_btn {
    position: absolute;
    top: 32px;
    right: 32px;
  }
  .example_img {
    padding-top: 32px;
    img {
      width: 100%;
    }
  }
  p {
    padding-top: 10px;
    padding-bottom: 32px;
    color: #666;
  }
  .btn {
    text-align: center;
    padding-bottom: 32px;
    button {
      width: 488px;
      height: 72px;
      margin: auto;
      border: 0;
      border-radius: 25px; /*no*/
      color: #fff;
      background-color: $themeColors;
      box-shadow: 0px 6px 14px 0px rgba(159, 204, 254, 1); /*no*/
    }
  }
}
</style>
